<template>
<view>
<scroll-view class="bookScroll" scroll-y>
     <view class="bookBody">
          <view class="bookMsg">
						<view class="settingItem" style="padding-left: 0;padding-top: 0;">
						  <text>商家名: {{orderInfo.shopName === '系统管理员' ? '心选民宿' : orderInfo.shopName}}</text>
						  <text style="margin-left: 40rpx;">商家电话: {{orderInfo.shopPhone || ''}}</text>
						</view>
						  <view style="display: flex; flex-direction: row;">
								<view>
									<view>{{orderInfo.hotelName}}</view>
									<view style="margin-top:10rpx;">地址：{{orderInfo.hotelAddress}}</view>
									<view style="margin-top:10rpx;">电话：{{orderInfo.hotelPhone}}</view>
								</view>
								<view style="margin: 0 auto;font-size: 36rpx;color: #f66e26;">
									<text>{{stateList[orderInfo.status]}}</text>
								</view>
							</view>
          </view>

          <block data-type="template" data-is="settingItem" data-attr="caption:'入住/离店',value:startDate+'/'+endDate,needIcon:false,isInput:false">
     <view class="settingItem">
          <text class="caption">入住/离店</text>
          <text class="value">{{orderInfo.startDate+'/'+orderInfo.endDate}}</text>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'房间数量 ',value:'1间 ',needIcon:true,isInput:false">
     <view class="settingItem">
          <text class="caption">房间数量</text>
          <text class="value">1间</text>
     </view>
</block>
          <view style="width:100%;height:24rpx;"></view>
          <block data-type="template" data-is="settingItem" data-attr="caption:'入住人 ',value:'1间 ',needIcon:false,isInput:true,hint:'请输入姓名',inputType:'text'">
     <view class="settingItem">
          <text class="caption">入住人</text>
          <text>{{orderInfo.name}}</text>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'手机号码 ',value:'1间 ',needIcon:false,isInput:true,hint:'请输入手机号码',inputType:'number'">
     <view class="settingItem">
          <text class="caption">手机号码</text>
					<text>{{orderInfo.phone}}</text>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'到店时间',value:'19:00',needIcon:false,isInput:false">
     <view class="settingItem">
			 <text class="caption">到店时间</text>
				<text>{{orderInfo.arriveTime}}</text>
     </view>
</block>
          <view class="settingItem">
               <text class="caption">备注</text>
               <text>{{orderInfo.remark}}</text>
          </view>
          <view style="width:100%;height:100rpx;"></view>
     </view>
</scroll-view>

<view :class=" show ? '' : 'payItem'">
     <view class="priceItem">
          <text>价格：</text>
          <text>¥{{orderInfo.price}}</text>
     </view>
</view>
</view>
</template>

<script>
// pages/bookHotel/bookHotel.js

var app = getApp();
import clearInput from "../../components/clearInput/clearInput";
import passkeyborad from "@/components/paykeyboard/yzc-paykeyboard.vue"
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
export default {
  data() {
    return {
			nowTime : new Date().getTime(),
			show: false,
      isDiscount: false,
			stateList: ["待入住", "已入住"],
			orderInfo: {
				hotelAddress:'',
				hotelPhone:'',
				price:0,
				hotelName:'',
				startDate:'',
				endDate:'',
				dayCount:'',
				name:'', // 入住人
				phone:'', // 入住人电话
				arriveTime:'',
				remark:'',
				shopName: '',
				shopPhone: ''
			},
      discount: '不选择优惠',
			dateString: '',
			type: 'time',
    };
  },

  components: {
    clearInput,
		passkeyborad,
		uniDatetimePicker
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
		this.init(options)
  },
  
  methods: {
		init({ id }){
			try{
				uniCloud.callFunction({
					name: 'purchaseDetail',
					data: {id},
					success: (res) => {
						console.log(res.result.data)
						const { hotel_address,hotelName,phone } = res.result.data.hotelList[0]
						const { nickname,mobile } = res.result.data.userList[0]
						Object.assign(this.orderInfo,res.result.data,{hotelAddress:hotel_address},{hotelPhone:phone},{shopName:nickname},{shopPhone:mobile})
						console.log(this.orderInfo)
					},
					complete: () => {
						this.loadenable = false
					}
				})
			} catch (e) {
				console.log(e)
				uni.showToast({
						title: '系统出错，请稍后重新',
						icon: 'none',
						duration: 2000
				});
			}
		}
	}
};
</script>
<style>
/* pages/bookHotel/bookHotel.wxss */

Page {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     position: relative;
     font-size: 30rpx;
     background: #f2f2f2;
}

.bookScroll {
     width: 100%;
     height: max-content;
     flex: 1;
     white-space: nowrap;
}

.bookBody {
     width: 100%;
     overflow: scroll;
     padding-bottom: 100rpx;
     /* position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 100rpx; */
}

.bookBody .bookMsg {
     margin: 24rpx;
     display: flex;
     flex-direction: column;
     padding: 36rpx;
     border-radius: 10rpx;
     box-shadow: 0rpx 6rpx 20rpx #ccc;
     background: white;
}

.payItem {
     width: 100%;
     height: 100rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     background: white;
     border-top: 1rpx solid #ee6715;
     font-size: 32rpx;
     z-index: 10;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
}

.payItem .priceItem {
     flex: 1;
     color: #ee6715;
     padding-left: 24rpx;
}

.payItem .payBtn {
     display: flex;
     align-items: center;
     height: 100%;
     justify-content: center;
     color: white;
     font-weight: bold;
     width: 250rpx;
     background: #ee6715;
}

.settingItem {
     display: flex;
     width: 100%;
     box-sizing: border-box;
     flex-direction: row;
     background: white;
     border-bottom: #dedede solid 1px;
     padding: 26rpx;
     align-items: center;
}

.settingItem .caption, .settingItem .value {
     font-size: 30rpx;
     color: #333;
     align-items: center;
     display: flex;
}

.settingItem .caption {
     width: 220rpx;
}

.settingItem .value {
     flex: 1;
     text-align: left;
}

.settingItem .icon {
     width: 28rpx;
     margin-left: 10rpx;
}

.settingItem .discount, .settingItem .remark {
     flex: 1;
     text-align: right;
     display: inline-block;
     align-items: center;
}

.settingItem .discount {
     color: #ee6715;
}

.settingItem .invoice {
     color: #ee6715;
     position: absolute;
     right: 0;
}

</style>